<template>
  <div class="freeTrial_module">
    <div class="freeTrial">
      <div class="form_module">
        <el-card style="max-width: 500px">
          <el-form ref="ruleFormRef" :size="formSize" :model="form" label-width="auto" :rules="rules"  style="max-width: 500px">
            <el-form-item>
              <!-- 免费试用 -->
              <div class="form_item border_none align_items_center justify_center">
                <span class="freeTrial_title">{{$t("collect_free_to_use_title")}}</span>
              </div>
            </el-form-item>
            <!-- 姓名 -->
            <el-form-item prop="name">
              <div class="form_item">
                <label class="form_item_label">{{$t("collect_free_to_use_label_name")}}</label>
                <div>
                  <el-input
                  class="form_item_input"
                  type="text"
                  :placeholder="$t('collect_free_to_user_name_placeholde')"
                  v-model="form.name"
                />
                </div>
              </div>
            </el-form-item>
            <!-- 手机号 -->
            <el-form-item prop="phoneNum">
              <div class="form_item">
                <label class="form_item_label">{{$t("collect_free_to_use_label_phone_title")}}</label>
                <div>
                  <el-input
                  class="form_item_input"
                  type="text"
                  :placeholder="$t('collect_free_to_use_phone_placeholde')"
                  v-model="form.phoneNum"
                />
                </div>
              </div>
            </el-form-item>
            <!-- 验证码 -->
            <el-form-item prop="verificationCode">
              <div class="form_item">
                <label class="form_item_label">{{$t("collect_free_to_use_label_verificationCode")}}</label>
                <div>
                  <el-input
                  class="form_item_input"
                  type="text"
                  :placeholder="$t('collect_free_to_use_verificationCode_placeholde')"
                  v-model="form.verificationCode"
                />
                </div>
                <div>
                  <el-button :disabled="countdownInfo.isDisabled" @click="getVericaTime">{{countdownInfo.buttonName}}</el-button>
                </div>
              </div>
            </el-form-item>
            <!-- 店铺类型 -->
            <el-form-item prop="shopType">
              <div class="form_item">
                <label class="form_item_label">{{$t("collect_free_to_use_label_shopType")}}</label>
                 <div style="width:80%">
                    <el-select v-model="form.shopType" filterable :placeholder="$t('collect_free_to_use_shopType_placeholde')">
                      <el-option v-for="(item) in shopTypeList.value" :label="item.title" :key="item.code" :value="item.code"></el-option>
                    </el-select>
                </div>               

              </div>
            </el-form-item>
            <!-- 店铺数量 -->
            <el-form-item prop="shopNum">
              <div class="form_item">
                <label class="form_item_label">{{$t("collect_free_to_use_label_shopNum")}}</label>
                <div>
                  <el-input
                  class="form_item_input"
                  type="text"
                  :placeholder="$t('collect_free_to_use_shopNum_placeholde')"
                  v-model="form.shopNum"
                />
                </div>
              </div>
            </el-form-item>
            <!-- 按钮 -->
            <el-form-item prop="isChecked">
              <div class="form_btn_module wfull mt22">
                <!-- 免费试用 -->
                  <el-button :loading="freeTrialLoading" type="primary" class="wfull" @click="handleSubmit(ruleFormRef)">{{$t("collect_free_to_use_btn")}}</el-button>
                <div class="form_check_module wfull">
                  <el-checkbox-group v-model="form.isChecked">
                  <el-checkbox value="1" size="large" name="isChecked" />

                  </el-checkbox-group>
                  <!-- 我已阅读并同意 -->
                  <span>{{$t("collect_free_to_use_read_already")}}</span>
                  <!-- 《个人信息授权与隐私政策》 -->
                  <span class="myInfo">{{$t("collect_free_to_use_read_already_info")}}</span>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref,watch,onMounted } from "vue";
import  {RouleForm,RouleFormData,shopTypeDataType,dataType} from "../../viewModel/freeTrialPageViewModel/freeTrialPageViewModel"
import type { FormInstance, FormRules,ComponentSize } from 'element-plus'
import {submitFreeTrial} from "../../service/freeTrial/freeTrial"

import {useRouter} from "vue-router"

// 生命周期函数
onMounted(() => {

  let localCountdownInfo = JSON.parse(localStorage.getItem('countdownInfo') as string)
  if (localCountdownInfo) {
    countdownInfo.value = localCountdownInfo
    if (countdownInfo.value.second !== 60) {
      getVericaTime()
    }
  }
})

let freeTrialLoading = ref<boolean>(false)
const router = useRouter()

const shopTypeList = reactive<dataType<shopTypeDataType>>({
 value: [
  {
    title: "商超",
    code: "1"
  },
  {
    title: "零售",
    code: "2"
  },
  {
    title: "餐饮",
    code: "3"
  }
 ]
})
const formSize = ref<ComponentSize>('default')
const form = reactive<RouleForm>({
  name: "",
  phoneNum: "",
  verificationCode: "",
  shopType: "",
  shopNum: "",
  isChecked: []
});
const ruleFormRef = ref<FormInstance>()

const rules = reactive<FormRules<RouleForm>>(RouleFormData)

// 倒计时信息
let countdownInfo = ref({
  second: 60,
  buttonName: "获取验证码",
  isDisabled: false
})
// 定义倒计时函数
const getVericaTime = ()=> {
  countdownInfo.value.isDisabled = true
  // 开始倒计时 
  
  let interval = window.setInterval(function() {
    countdownInfo.value.buttonName = `${countdownInfo.value.second}秒后重新获取`
    countdownInfo.value.second = countdownInfo.value.second - 1
    if (countdownInfo.value.second <= 0) {
      countdownInfo.value.buttonName = "获取验证码"
      countdownInfo.value.second = 60
      countdownInfo.value.isDisabled = false
      window.clearInterval(interval)
    }
  },1000) // 一秒执行一次
}

// 提交获取数据
const handleSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      freeTrialLoading.value = true
      console.log('submit!',form)
      submitFreeTrial().then(() => {
        console.log("成功");
        freeTrialLoading.value = false
         router.push({
        path: "/register"
      })
        
      }).catch(() => {
        console.log("失败");
        
      });
    } else {
      console.log('error submit!', fields)
    }
  })
}

// 监听对象，数据是否发生变化，改变就进行重新保存
watch(countdownInfo,(newVal) => {
  let JSONSTR = JSON.stringify(newVal)
  localStorage.setItem('countdownInfo',JSONSTR)
},{
  deep:true // 深度监听
})
</script>
<style>
.freeTrial_module .form_module .el-card__body {
  padding: 10px 60px !important;
}
.freeTrial_module .form_check_module .el-checkbox {
  margin-right: 5px;
}
.freeTrial_module .form_module .form_item_input .el-input__wrapper {
  border: none !important;
  box-shadow: none !important;
}
.freeTrial_module .form_module .el-select__wrapper {
  border: none !important;
  box-shadow: none !important;
}
</style>
<style scoped>
.freeTrial_module {
  position: relative;
  height: 100vh;
  width: 100%;
}

.freeTrial {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: url("../../static/homeInfo.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.form_module {
  position: fixed;
  min-width: 500px;
  right: 100px;
}
.form_item {
  display: flex;
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid rgb(221.7, 222.6, 224.4);
}
.border_none {
  border: none;
}
.freeTrial_title {
  font-weight: bold;
  font-size: 20px;
}
.form_btn_module {

}
.form_check_module {
  display: flex;
  align-items: center;
  width: 100%;

}
.myInfo {
  color: #2878ff;
  cursor: pointer;
}
.form_item_label {
  width: 80px;
}
</style>
